<template>
	<view>
		<nav-custom :name="title"></nav-custom>
		<view class="list">
			<view class="black_f_40 font_w_bold bor_bot">
				已完成，收益已到账
			</view>
			<view class="back bor_bot">
				<view class="mar_b_8">
					<text class="black_f_28 font_w_bold">李先生</text>
					<text class="grey_f_28">181***1210</text>
				</view>
				<view class="black_f_32">贵州省贵阳市南明区花果园购物中心1号</view>
			</view>
			<view class="back bor_bot dis_f_sb_c">
				<image class="a_img" :src="url+'/logo.png'" mode=""></image>
				<view class="list_er dis_f_co_sb">
					<view class="">
						<view class="black_f_32 font_w_bold slh_one mar_b_8">小牛电动 B0都市版新国标...</view>
						<view class="dis_f_sb_c">
							<view class="grey_f_28">2021新款;220V</view>
							<view class="black_f_28">x1</view>
						</view>
					</view>
					<view class="black_f_28 list_er_p">￥50.25</view>
				</view>
			</view>
			<view class="back bottom_c bor_bot dis_f_sb_c">
				<image class="sh_img" :src="url+'/image/shback.png'" mode=""></image>
				<view class="dis_f_l_c">
					<image class="tx_img" :src="url+'/logo.png'" mode=""></image>
					<view>
						<view class="mar_b_8 black_f_32 font_w_bold">同路仁接单员</view>
						<view>
							<u-rate readonly allowHalf="true" size="14" activeColor="#FF6401"
								inactiveColor="#F7F7F7" :count="count" v-model="value"></u-rate>
						</view>
					</view>
				</view>
				<view class="bo_c_r">
					<image class="call_img" :src="url+'/image/huicall.png'" mode=""></image>
					<view class="grey_f_24">电话联系</view>
				</view>
			</view>
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_b_bot">
					<view class="black_s_28">取货单号</view>
					<view class="black_f_28">#012</view>
				</view>
				<view class="dis_f_sb_c">
					<view class="black_s_28">买家留言</view>
					<view class="black_f_28">留言</view>
				</view>
			</view>
			<view class="back bor_bot">
				<view class="dis_f_sb_c bor_b_bot">
					<view class="black_s_28">商品金额</view>
					<view class="black_f_28">￥20.05</view>
				</view>
				<view class="dis_f_sb_c bor_b_bot">
					<view class="black_s_28">优惠</view>
					<view class="black_f_28">￥50.05</view>
				</view>
				<view class="dis_f_sb_c">
					<view class="black_s_28">合计</view>
					<view class="orange_f_28">￥2000.05</view>
				</view>
			</view>
			<view class="back bor_bot">
				<view class="dis_f_sb bor_b_bot">
					<view class="black_s_28">订单编号</view>
					<view class="dis_f_r_c">
						<view class="black_f_28 mar_r_16">{{order}}</view>
						<view class="blue_f_28" @click="copy()">复制</view>
					</view>
				</view>
				<view class="dis_f_sb bor_b_bot">
					<view class="black_s_28">创建时间</view>
					<view class="black_f_28">2022-02-10 20:30:56</view>
				</view>
				<view class="dis_f_sb bor_b_bot">
					<view class="black_s_28">付款时间</view>
					<view class="black_f_28">2022-02-10 20:30:56</view>
				</view>
				<view class="dis_f_sb bor_b_bot">
					<view class="black_s_28">接单时间</view>
					<view class="black_f_28">2022-02-10 20:30:56</view>
				</view>
				
				<view class="dis_f_sb bor_b_bot">
					<view class="black_s_28">取货时间</view>
					<view class="black_f_28">2022-02-10 20:31:26</view>
				</view>
				<view class="dis_f_sb bor_b_bot">
					<view class="black_s_28">送达时间</view>
					<view class="black_f_28">2022-02-10 20:31:26</view>
				</view>
			</view>
		</view>
		<image class="bo_js_er_img" :src="url+'/image/zcxian.png'" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: " ",
				order: "20225113215554",
				count: 5,
				value: 3.5,
				url:'',
			}
		},
		onShow() {
			this.url=this.$.ajax_url3
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.order
				});
			}
		}
	}
</script>

<style lang="scss">
	.a_img {
		width: 200rpx;
		height: 200rpx;
	}

	.l_right {
		width: 414rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.list {
		margin-top: 170rpx;
		padding: 0 32rpx;
	}
	
	.a_img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 24rpx;
	}
	
	.list_er {
		width: 414rpx;
	}
	
	.list_er_p {
		margin-top: 52rpx;
		text-align: right;
	}
	
	.back {
		padding: 32rpx 24rpx;
	}
	
	.top {}
	
	.tx_img {
		width: 64rpx;
		height: 64rpx;
		border: 2rpx solid #F7FAFF;
		border-radius: 100rpx;
	}
	
	.image {
		position: relative;
	}
	
	.image_a {
		margin-right: 26rpx;
	}
	
	.image_a:nth-child(3n) {
		margin-right: 0;
	}
	
	.image_b {
		width: 196rpx;
		height: 196rpx;
		border-radius: 16rpx;
		background-color: rgba(0, 0, 0, 0.4);
		position: absolute;
		right: 0rpx;
		bottom: 6rpx;
		text-align: center;
		line-height: 196rpx;
	}
	
	.pl_img {
		width: 196rpx;
		height: 196rpx;
		border-radius: 16rpx;
	}
	
	.bot_img {
		width: 750rpx;
		height: 40rpx;
		position: fixed;
		bottom: 150rpx;
		left: 0;
	}
	
	.bottom_text {
		width: 686rpx;
		height: 108rpx;
		padding: 0 32rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: 30rpx;
	}
	
	.text_a {
		width: 518rpx;
		height: 76rpx;
		background: #F7F7F7;
		padding-left: 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 76rpx;
	}
	
	.box_text {
		width: 686rpx;
		padding: 24rpx 32rpx;
	}
	.bottom_c {
		padding: 32rpx 24rpx;
		position: relative;
	}
	
	.sh_img {
		width: 144rpx;
		height: 162rpx;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.tx_img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 100rpx;
		margin-right: 16rpx;
	}
	
	.call_img {
		width: 48rpx;
		height: 48rpx;
	}
	
	.bo_c_r {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		right: 24rpx;
		top: 28rpx;
	}
</style>